{% extends "project_base_en.html" %}
{% block title %}Konten{% endblock %}
{% block script %}
	function removeButtonClick(event)
	{
		new Ajax.Request("/accounts", {
				method: 'post',
				parameters: { Action: 'Remove', Group: $F('group_list'), Members: $F('member_list').toJSON() },
				onSuccess: function(transport) {
					$('person_list').update(transport.responseText);
				}
			});
	}

	// updates the list of all members
	function updateMemberList()
	{
		new Ajax.Updater('member_list', '/accounts', {
			method: 'post',
			parameters: {
				token: token_key,
				action: 'members',
				group: $F('group_list')
			}
		});
	}

	document.observe("dom:loaded", function ()
	{
		// add on click function to all table rows
		$('group_list').observe('change', updateMemberList);

		// add selected accounts to the member list of the currently selected group
		$('member_add').observe('click', function(event){
			new Ajax.Updater('member_list' , '/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'member_add',
					member_weight: $F('member_weight'),
					group: $F('group_list'),
					account_key_list: $F('person_list').toJSON()
				},
				onFailure: function(transport)
				{
					alert(transport.responseText);
				}
			});
		});

		// add selected accounts to the member list of the currently selected group
		$('member_remove').observe('click', function(event){
			new Ajax.Updater('member_list' , '/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'member_remove',
					group: $F('group_list'),
					member_list: $F('member_list').toJSON()
				},
				onFailure: function(transport)
				{
					alert(transport.responseText);
				}
			});
		});


		// add a new person
		$('person_add').observe('click', function(event){
			new Ajax.Request('/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'person_add',
					name: $F('person_name')
				},
				onSuccess: function(transport) {
					$('person_list').update(transport.responseText);
				},
				onFailure: function(transport) {
					alert(transport.responseText);
				}
			});
			$('person_name').value='';
		});

		// rename a existing person
		$('person_rename').observe('click', function(event){
			new Ajax.Request('/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'person_rename',
					account: $F('person_list'),
					name: $F('person_name')
				},
				onFailure: function(transport)
				{
					alert(transport.responseText);
				},
				onSuccess: function(transport) {
					$('person_list').update(transport.responseText);
					updateMemberList(); 	// because the name might have changed
				}
			});
			$('person_name').value='';
		});


		// remove the selected persons from the list
		$('person_remove').observe('click', function(event){
			new Ajax.Request('/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'person_remove',
					person_list: $F('person_list').toJSON()
				},
				onSuccess: function(transport) {
					$('person_list').update(transport.responseText);
					updateMemberList(); 	// because the account might have been removed from memberlist
				}
			});
			$('person_name').value='';
		});

		// rename a existing group
		$('group_rename').observe('click', function(event){
			new Ajax.Request('/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'group_rename',
					account: $F('group_list'),
					name: $F('group_name')
				},
				onSuccess: function(transport) {
					$('group_list').update(transport.responseText);
				},
				onFailure: function(transport) {
					alert(transport.responseText);
				}
			});
			$('group_name').value='';
		});


		// add a new group
		$('group_add').observe('click', function(event) {
			new Ajax.Request('/accounts', {
				method: 'post',
				parameters: {
					token: token_key,
					action: 'group_add',
					name: $F('group_name')
				},
				onFailure: function(transport) {
					alert(transport.responseText);
				},
				onSuccess: function(transport) {
					$('group_list').update(transport.responseText);
					updateMemberList();
				}
			});
			$('group_name').value='';
		});

		// remove the currently selected group
		$('group_remove').observe('click', function(event){
			new Ajax.Request("/accounts", {
					method: 'post',
					parameters: {
						token: token_key,
						action: 'group_remove',
						group: $F('group_list'),
					},
					onSuccess: function(transport) {
						$('group_list').update(transport.responseText);
						updateMemberList();
					}
				});
			$('group_name').value='';
		});

		// fill group and person list's
		new Ajax.Request('/accounts', {
			method: 'post',
			parameters: {
				token: token_key,
				action: 'list',
				type: 'group'
			},
			onSuccess: function(transport) {
				$('group_list').update(transport.responseText);
				updateMemberList();
			}
		});
		new Ajax.Updater('person_list', '/accounts', { method: 'post', parameters: { token: token_key, action: 'list', type: 'person' } });
	});

	Ajax.Responders.register({
		onCreate: function() {
			$('progress').show();
			$('account_form').disable();
		},
		onComplete: function() {
			$('account_form').enable();
			$('progress').hide();
		}
	});
{% endblock %}
{% block body %}
<form id="account_form">
<fieldset><legend>Konten</legend>
<table>
	<tr>
		<td>Gruppenkonten</td>
		<td>Mitglieder</td>
		<td>Personen</td>
	</tr>
	<tr>
		<td><input type="text" id="group_name" class="formInputWidth"
			size="30" /></td>
		<td><input type="text" class="formInputWidth" name="weight"
			id="member_weight" size="1" value="1" maxlength="4" /></td>
		<td><input type="text" id="person_name" class="formInputWidth"
			size="6" /></td>
	</tr>
	<tr>
		<td>
		<button name="action" class="buttonWidth" type="button" id="group_add">Neue
		Gruppe erstellen</button>
		</td>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="member_add">Ausgewählte Personen zur Gruppe hinzufügen</button>
		</td>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="person_add">Neue Person hinzufügen</button>
		<br />
		</td>
	</tr>
	<tr>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="group_rename">Gruppe umbenennen</button>
		</td>
		<td> </td>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="person_rename">Person umbenennen</button>
		</td>
	</tr>
	<tr>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="group_remove">Gruppe löschen</button>
		</td>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="member_remove">Ausgewählte Mitglieder entfernen</button>
		</td>
		<td>
		<button name="action" class="buttonWidth" type="button"
			id="person_remove">Person löschen</button>
		</td>
	</tr>
	<tr>
		<td><select class="formInputWidth" id="group_list" size="10"></select></td>
		<td><select class="formInputWidth" id="member_list" size="10"
			multiple="multiple"></select></td>
		<td><select class="formInputWidth" id="person_list" size="10"
			multiple="multiple"></select></td>
	</tr>
</table>
</fieldset>
</form>
<p id="progress" style="display: none;">Aktualisierung&#8230;</p>
<p id="result"></p>
{% endblock %}
